<template>
  <div class="bg">
    <div class="w-50 mx-auto text-center p-5">
      <h1>OA系统</h1>
    </div>
    <div class="main">
      <div class="image"></div>
      <div class="w-100 bg-white p-0" style="position: relative;height: 400px;display: flex;">
        <input class="d-none" type="radio" name="widget-tab" id="login" checked="checked">
        <input class="d-none" type="radio" name="widget-tab" id="register">
        <input class="d-none" type="radio" name="widget-tab" id="forget">
        <input class="d-none" type="radio" name="widget-tab" id="contract">
        <div id="widget-title" class="h-100 w-25 bg-white text-center">
          <label
            class="w-100 h-25 d-block m-0 pt-3"
            for="login"
            id="tag-login"
            style="font-size: 26px;"
          >
            <span class="fa fa-user-circle d-block" aria-hidden="true"></span>
            <label class="font-weight-bold" style="font-size: 20px;">登录</label>
          </label>
          <label
            class="w-100 h-25 d-block m-0 pt-3"
            for="register"
            id="tag-register"
            style="font-size: 26px;"
          >
            <span class="fa fa-pencil-square d-block" aria-hidden="true"></span>
            <label class="font-weight-bold" style="font-size: 20px;">注册</label>
          </label>
          <label
            class="w-100 h-25 d-block m-0 pt-3"
            for="forget"
            id="tag-forget"
            style="font-size: 26px;"
          >
            <span class="fa fa-lock d-block" aria-hidden="true"></span>
            <label class="font-weight-bold" style="font-size: 20px;">忘记密码</label>
          </label>
          <label
            class="w-100 h-25 d-block m-0 pt-3"
            for="contract"
            id="tag-contract"
            style="font-size: 26px;"
          >
            <span class="fa fa-envelope d-block" aria-hidden="true"></span>
            <label class="font-weight-bold" style="font-size: 20px;">联系管理员</label>
          </label>
        </div>
        <div id="widget-box" class="w-75 h-100">
          <div id="context-login" class="w-100 h-100">
            <input class="d-none" type="radio" name="login-select" id="account" checked="checked">
            <input class="d-none" type="radio" name="login-select" id="weixin">
            <div id="login-title" class="d-flex justify-content-end mt-1 md-1">
              <label id="tag-account" for="account">
                <div class="login-tag">
                  <span class="login-tag-title">
                    <span>账号登录</span>
                    <span class="login-tag-right"></span>
                  </span>
                  <span class="fa fa-user-o login-tag-logo" aria-hidden="true"></span>
                </div>
              </label>
              <label id="tag-weixin" for="weixin">
                <div class="login-tag">
                  <span class="login-tag-title">
                    <span>微信登录</span>
                    <span class="login-tag-right"></span>
                  </span>
                  <span class="fa fa-wechat login-tag-logo" aria-hidden="true"></span>
                </div>
              </label>
            </div>
            <div id="login-box" class="w-100 h-75">
              <h2 class="text-center mt-3 mb-5">Login Here</h2>
              <div id="context-account">
                <div class="w-75 mx-auto">
                  <form>
                    <div class="form-group">
                      <input
                        class="form-control"
                        type="text"
                        v-model="loginReq.username"
                        placeholder="请输入用户名"
                      >
                    </div>
                    <div class="form-group">
                      <input
                        class="form-control"
                        type="password"
                        v-model="loginReq.password"
                        placeholder="请输入密码"
                      >
                    </div>
                  </form>
                  <div class="w-75 mx-auto">
                    <button class="btn btn-success btn-block" @click="login">登录</button>
                  </div>
                </div>
              </div>
              <div id="context-weixin">
                <img
                  id="code2"
                  src="../assets/logo.png"
                  class="rounded mx-auto d-block border border-light rounded"
                  alt
                >
              </div>
            </div>
          </div>
          <div id="context-register" class="h-100">
            <div class="w-100 h-100 d-flex justify-content-center align-content-center flex-wrap">
              <p
                class="text-center text-danger font-weight-bold"
                style="font-size:26px"
              >2此功能尚未实现尽情期待</p>
            </div>
          </div>
          <div id="context-forget" class="h-100">
            <div class="w-100 h-100 d-flex justify-content-center align-content-center flex-wrap">
              <p
                class="text-center text-danger font-weight-bold"
                style="font-size:26px"
              >3此功能尚未实现尽情期待</p>
            </div>
          </div>
          <div id="context-contract" class="h-100">
            <div class="w-100 h-100 d-flex justify-content-center align-content-center flex-wrap">
              <p
                class="text-center text-danger font-weight-bold"
                style="font-size:26px"
              >4此功能尚未实现尽情期待</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="w-50 mx-auto text-center p-5">
      <h4 class="pt-5">
        © 2019 Triple Forms. All rights reserved | Design by
        <div href="http://w3layouts.com" target="_blank">W3layouts</div>
      </h4>
    </div>
  </div>
</template>

<script>
import req from "../req";
import url from "../url";
export default {
  name: "v-login",
  data() {
    return {
      loginReq: {
        username: "admin",
        password: "admin"
      },
      title: ""
    };
  },
  methods: {
    login() {
      req.POST("/login", req.myLoginJson(this.loginReq)).then(data => {
        if (data.result == "success") {
          this.$store.commit({
            type: "init",
            id: data.id,
            username: data.username
          });
          this.$router.push("/main");
        }
      });
      this.$router.push("/login");
    }
  }
};
</script>
</script>

<style scoped>
@import url("../assets/css/font-awesome.min.css");
.bg {
  height: 100%;
  background: url("../assets/b.jpg") no-repeat center;
  background-size: cover;
}

h1 {
  color: #fff;
  font-weight: 600;
  letter-spacing: 6px;
  padding: 20px 0;
}

.main {
  margin: 0 auto;
  width: 980px;
  display: flex;
}

.image {
  width: 300px;
  height: 400px;
  background: url("../assets/m.jpg") no-repeat center;
  background-size: cover;
}
@media (max-width: 1123px) {
  .image {
    display: none;
  }
}
#login:checked ~ #widget-title #tag-login,
#register:checked ~ #widget-title #tag-register,
#forget:checked ~ #widget-title #tag-forget,
#contract:checked ~ #widget-title #tag-contract {
  background: #00ad45;
  border-right: 1px solid #000;
  color: #fff;
}
#context-login,
#context-register,
#context-forget,
#context-contract {
  display: none;
}
#login:checked ~ #widget-box > #context-login,
#register:checked ~ #widget-box > #context-register,
#forget:checked ~ #widget-box > #context-forget,
#contract:checked ~ #widget-box > #context-contract {
  display: block;
}

#context-account,
#context-weixin {
  display: none;
}
#account:checked ~ #login-title > #tag-account {
  display: none;
}
#weixin:checked ~ #login-title > #tag-weixin {
  display: none;
}
#account:checked ~ #login-box > #context-account,
#weixin:checked ~ #login-box > #context-weixin {
  display: block;
}
#code2 {
  transition: transform 0.2s linear 0s;
}
#code2:hover {
  transform: translate(20px, 0);
  -webkit-transform: translate(20px, 0);
  -moz-transform: translate(20px, 0);
  -o-transform: translate(20px, 0);
  -ms-transform: translate(20px, 0);
  transition: transform 0.2s linear 0s;
}
.login-tag {
  max-width: 100%;
  max-height: 40px;
  display: flex;
  justify-content: flex-end;
  padding: 10px 20px 10px 0;
}
.login-tag > .login-tag-title {
  position: relative;
  height: 23px;
  font-size: 10px;
  line-height: 17px;
  color: #00ad45;
  max-height: 40px;
  margin: 0 10px;
  padding: 3px 4px;
  border: #00ad45 solid 1px;
  background-color: #c9f5db;
}
.login-tag > .login-tag-title > .login-tag-right {
  position: absolute;
}
.login-tag > .login-tag-title > .login-tag-right::before,
.login-tag > .login-tag-title > .login-tag-right::after {
  position: absolute;
  top: 2px;
  content: "";
  border-top: 6px transparent solid;
  border-bottom: 6px transparent solid;
  border-right: 6px transparent solid;
  border-left: 6px #c9f5db solid;
}
.login-tag > .login-tag-title > .login-tag-right::before {
  left: 5px;
  border-left: 6px #00ad45 solid;
}
.login-tag > .login-tag-title > .login-tag-right::after {
  left: 4px;
  border-left: 6px #c9f5db solid;
}
.login-tag > .login-tag-logo {
  color: #323335;
  font-size: 1.3em;
  width: 20px
}
</style>
